<template>
	<view>

		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="车辆信息" label-color="#333333"></u-icon>
			</view>


			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

			<view class="text-line">
				<text class="text-name">车牌号:</text>
				<text class="text-value">{{filterNull(carInformation.carNo)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">品牌/车系/车型:</text>
				<text class="text-value">{{filterNull(carInformation.brandSeriesModelName)}}</text>
			</view>

		</view>

		<view v-if="type==0">
			<!-- 保险--交强险 -->

			<view class="item">

				<view class="title-wrap">
					<u-icon name="order" color="#12B9A3" label="交强险保单信息" label-color="#333333"></u-icon>
					<view class="warn-info">
						{{ compulsoryDetail.jqPolicyPrescriptionStr ? compulsoryDetail.jqPolicyPrescriptionStr : '' }}
					</view>
				</view>


				<view v-if="compulsoryDetail!=null">

					<view class="text-line">
						<text class="text-name">交强险开始时间:</text>
						<text class="text-value">{{filterNull(compulsoryDetail.compulsoryStartTime)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">交强险结束时间:</text>
						<text class="text-value">{{filterNull(compulsoryDetail.compulsoryEndTime)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">交强险保单号:</text>
						<text class="text-value">{{filterNull(compulsoryDetail.compulsoryNo)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">保险公司:</text>
						<text class="text-value">{{filterNull(compulsoryDetail.compulsoryCompany)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">保险公司联系电话:</text>
						<text class="text-value">{{filterNull(compulsoryDetail.compulsoryCompanyPhone)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">备注:</text>
						<text class="text-value">{{filterNull(compulsoryDetail.compulsoryRemark)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">费用:</text>
						<text
							class="text-value">￥{{ compulsoryDetail.compulsoryAmount?compulsoryDetail.compulsoryAmount:'0' }}</text>
					</view>

					<view style="margin: 0 0 20upx 20upx;" v-if="compulsoryDetail.compulsoryUrlList.length>0">
						<view class="text-name" style="margin-bottom: 18upx;">保单照片</view>
						<u-album :urls="compulsoryDetail.compulsoryUrlList" rowCount="4"></u-album>
					</view>

					<view class="text-line" v-if="compulsoryDetail.compulsoryAccessoryVOList!=null"
						v-for="(item, index) in compulsoryDetail.compulsoryAccessoryVOList" :key="index"
						@click="checkFile(item)">
						<view class="text-name">{{item.nameAccessory}}</view>
						<view class="text-value" style="color: #12B9A3;">查看</view>
					</view>


				</view>
				<no-data v-if='compulsoryDetail==null' content="暂无交强险"></no-data>

			</view>

			<view class="item">

				<view class="title-wrap">
					<u-icon name="order" color="#12B9A3" label="商业险保单信息" label-color="#333333"></u-icon>
					<view class="warn-info">
						{{ commercialDetail.syPolicyPrescriptionStr ? commercialDetail.syPolicyPrescriptionStr : '' }}
					</view>
				</view>


				<view v-if="commercialDetail!=null">

					<view class="text-line">
						<text class="text-name">商业险开始时间:</text>
						<text class="text-value">{{filterNull(commercialDetail.commercialStartTime)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">商业险结束时间:</text>
						<text class="text-value">{{filterNull(commercialDetail.commercialEndTime)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">商业险保单号:</text>
						<text class="text-value">{{filterNull(commercialDetail.commercialNo)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">保险公司:</text>
						<text class="text-value">{{filterNull(commercialDetail.commercialCompany)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">保险公司联系电话:</text>
						<text class="text-value">{{filterNull(commercialDetail.commercialCompanyPhone)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">备注:</text>
						<text class="text-value">{{filterNull(commercialDetail.commercialRemark)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">费用:</text>
						<text
							class="text-value">￥{{ commercialDetail.commercialAmount?commercialDetail.commercialAmount:'0' }}</text>
					</view>

					<view style="margin: 0 0 20upx 20upx;" v-if="commercialDetail.commercialUrlList.length>0">
						<view class="text-name" style="margin-bottom: 18upx;">保单照片</view>
						<u-album :urls="commercialDetail.commercialUrlList" rowCount="4"></u-album>
					</view>

					<view class="text-line" v-if="commercialDetail.commercialAccessoryVOList!=null"
						v-for="(item, index) in commercialDetail.commercialAccessoryVOList" :key="index"
						@click="checkFile(item)">
						<view class="text-name">{{item.nameAccessory}}</view>
						<view class="text-value" style="color: #12B9A3;">查看</view>
					</view>


				</view>
				<no-data v-if='commercialDetail==null' content="暂无商业险"></no-data>

			</view>

		</view>

		<view v-if="type==1">
			<!-- 年检 -->

			<view class="item">

				<view class="title-wrap">
					<u-icon name="order" color="#12B9A3" label="年检信息" label-color="#333333"></u-icon>
					<view class="warn-info">
						{{ annualInspection.prompt ? annualInspection.prompt : '' }}
					</view>
				</view>


				<view v-if="annualInspection && annualInspection.inspectionId">

					<view class="text-line">
						<text class="text-name">本次年检时间:</text>
						<text class="text-value">{{filterNull(annualInspection.thisTimeInspectionTime)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">下次年检时间:</text>
						<text class="text-value">{{filterNull(annualInspection.nextInspectionTime)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">年审代理人:</text>
						<text class="text-value">{{filterNull(annualInspection.inspectionAgent)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">备注:</text>
						<text class="text-value">{{filterNull(annualInspection.remark)}}</text>
					</view>

					<view style="margin: 0 0 20upx 20upx;" v-if="annualInspection.inspectionUrlList.length>0">
						<view class="text-name" style="margin-bottom: 18upx;">年检附件</view>
						<u-album :urls="annualInspection.inspectionUrlList" rowCount="4"></u-album>
					</view>

					<view class="text-line" v-if="annualInspection.inspectionList!=null"
						v-for="(item, index) in annualInspection.inspectionList" :key="index" @click="checkFile(item)">
						<view class="text-name">{{item.nameAccessory}}</view>
						<view class="text-value" style="color: #12B9A3;">查看</view>
					</view>


				</view>
				<no-data v-else content="暂无年检"></no-data>

			</view>

		</view>

		<view v-if="type==2">
			<!-- 保养 -->

			<view class="item">

				<view class="title-wrap">
					<u-icon name="order" color="#12B9A3" label="保养信息" label-color="#333333"></u-icon>
					<view class="warn-info">
						{{ maintenance.prompt ? maintenance.prompt : '' }}
					</view>
				</view>


				<view v-if="maintenance && maintenance.maintenanceId">

					<view class="text-line">
						<text class="text-name">服务站名称:</text>
						<text class="text-value">{{filterNull(maintenance.serviceSite)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">下次保养公里数:</text>
						<text class="text-value">{{maintenance.nextMile ? maintenance.nextMile + '/km' : '--'}}</text>
						<text class="text-value" style="color: #E04B28;"
							v-if="maintenance.isNextMilePromptStr">{{maintenance.isNextMilePromptStr}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">下次保养时间:</text>
						<text class="text-value">{{filterNull(maintenance.nextDate)}}</text>
						<text class="text-value" style="color: #E04B28;"
							v-if="maintenance.isNextDatePromptStr">{{maintenance.isNextDatePromptStr}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">本次保养时间:</text>
						<text class="text-value">{{filterNull(maintenance.maintenanceDate)}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">备注:</text>
						<text class="text-value">{{filterNull(maintenance.maintenanceRemark)}}</text>
					</view>

					<view style="margin: 0 0 20upx 20upx;" v-if="maintenance.maintenanceUrlList.length>0">
						<view class="text-name" style="margin-bottom: 18upx;">保养附件</view>
						<u-album :urls="maintenance.maintenanceUrlList" rowCount="4"></u-album>
					</view>

					<view class="text-line" v-if="maintenance.maintenanceFileLis!=null"
						v-for="(item, index) in maintenance.maintenanceFileLis" :key="index" @click="checkFile(item)">
						<view class="text-name">{{item.nameAccessory}}</view>
						<view class="text-value" style="color: #12B9A3;">查看</view>
					</view>


				</view>
				<no-data v-else content="暂无保养"></no-data>

			</view>

		</view>





	</view>
</template>

<script>
	import {
		insuranceinfo,
		inspectioninfo,
		maintenanceinfo
	} from '../../../../common/api.js';

	export default {
		data() {
			return {
				type: 0,
				carId: '',
				carInformation: null, //车辆

				// 保险
				commercialDetail: {

				}, // 商业险
				compulsoryDetail: {
					// jqPolicyPrescriptionStr: "阿斯蒂芬",
					// compulsoryUrlList: [
					// 	'https://cdn.uviewui.com/uview/album/1.jpg',
					// 	'https://cdn.uviewui.com/uview/album/2.jpg',
					// 	'https://cdn.uviewui.com/uview/album/3.jpg',
					// 	'https://cdn.uviewui.com/uview/album/4.jpg',
					// 	'https://cdn.uviewui.com/uview/album/5.jpg',
					// 	'https://cdn.uviewui.com/uview/album/6.jpg',
					// 	'https://cdn.uviewui.com/uview/album/7.jpg',
					// 	'https://cdn.uviewui.com/uview/album/8.jpg',
					// 	'https://cdn.uviewui.com/uview/album/9.jpg',
					// 	'https://cdn.uviewui.com/uview/album/10.jpg',
					// ],
					// compulsoryAccessoryVOList: [{
					// 	nameAccessory: "测试文件1",
					// 	nameFile: "pdf",
					// 	url: "http://www.html5-app.com/file/1.pdf",
					// 	typeFile: 0,
					// }, {
					// 	nameAccessory: "文测试件测试测试文测试件测试试件测试2",
					// 	nameFile: "docx",
					// 	url: "http://www.html5-app.com/file/a.docx",
					// 	typeFile: 0,
					// }, {
					// 	nameAccessory: "测试文件3333333",
					// 	nameFile: "pptx",
					// 	url: "http://www.html5-app.com/file/1.pptx",
					// 	typeFile: 0,
					// }],

				}, // 交强险
				annualInspection: {
					// inspectionId: "123",
				}, // 年检
				maintenance: {
					// maintenanceId:'123'
				}, // 保养

			}
		},
		methods: {
			
			addpre(list){
				if(!uni.$u.test.isEmpty(list)){
					list = list.map(
						(url) => this.baseImageUrl+url
					)
				}
				return list;
			},

			getInsuranceDetail() {
				insuranceinfo({
					params: {
						carId: this.carId,
					}
				}).then(res => {

					if (res) {
						this.carInformation = res.carInfo;
						this.commercialDetail = res.commercialDetail; // 商业险对象
						this.compulsoryDetail = res.compulsoryDetail; // 交强险对象

						this.commercialDetail.commercialUrlList = this.addpre(this.commercialDetail.commercialUrlList);
						this.compulsoryDetail.compulsoryUrlList = this.addpre(this.compulsoryDetail.compulsoryUrlList);

					}

				})
			},
			getInspectionDetail() {
				inspectioninfo({
					params: {
						carId: this.carId,
					}
				}).then(res => {

					if (res) {
						this.carInformation = res.carInfo;
						this.annualInspection = res;
						
						this.annualInspection.inspectionUrlList = this.addpre(this.annualInspection.inspectionUrlList);
					}

				})
			},
			getMaintainDetail() {
				maintenanceinfo({
					params: {
						carId: this.carId,
					}
				}).then(res => {

					if (res) {
						this.carInformation = res.carInfo;
						this.maintenance = res;
						
						this.maintenance.maintenanceUrlList = this.addpre(this.maintenance.maintenanceUrlList);
					}

				})
			},

			checkFile(item) {
				uni.downloadFile({
					url: this.baseImageUrl + item.url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			}

		},
		onLoad(op) {
			this.type = op.type;
			this.carId = op.carId;
			switch (op.type) {
				case '0':
					uni.setNavigationBarTitle({
						title: '保险详情'
					})
					this.getInsuranceDetail();
					break;
				case '1':
					uni.setNavigationBarTitle({
						title: '年检详情'
					})
					this.getInspectionDetail();
					break;
				case '2':
					uni.setNavigationBarTitle({
						title: '保养详情'
					})
					this.getMaintainDetail();
					break;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.file {
		display: flex;
		justify-content: space-between;
	}

	.pdf {
		font-size: 24upx;
		font-weight: 500;
		color: #333333;

	}

	.see {
		font-size: 24upx;
		font-weight: 500;
		color: #3385ff;
	}

	.phone {
		width: 30upx;
		height: 30upx;
		display: inline-block;
		margin: 0 15upx;
	}
</style>
